<template>
    <div id="userManagePage">
        <a-table :columns="columns" :data-source="dataList" @change="handleTableChange" >
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'userAvatar'">
                    <a-image :src="record.userAvatar" :width="120"></a-image>>
                </template>
                <template v-else-if="column.dataIndex === 'userRole'">
                    <div v-if="record.userRole === 'admin'">
                        <a-tag color="red">管理员</a-tag>
                    </div>
                    <div v-else>
                        <a-tag color="blue">普通用户</a-tag>
                    </div>
                </template>
                <template v-if="column.dataIndex === 'createTime'">
                    {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
                <template v-if="column.dataIndex === 'updateTime'">
                    {{ dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
                <template v-else-if="column.key === 'action'">
                    <span>
                        <a-button danger>删除</a-button>
                    </span>
                </template>
            </template>
        </a-table>
    </div>
</template>
<script lang="ts" setup>
import { listUserVoByPageUsingPost } from '@/api/yonghuxiangguanjiekou';
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
const columns = [
    {
        title: 'id',
        dataIndex: 'id',
        sorter: true,
    },
    {
        title: '账号',
        dataIndex: 'userAccount',
    },
    {
        title: '用户名',
        dataIndex: 'userName',
    },
    {
        title: '头像',
        dataIndex: 'userAvatar',
    },
    {
        title: '简介',
        dataIndex: 'userProfile',
    },
    {
        title: '用户角色',
        dataIndex: 'userRole',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        sorter:true,
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        key: 'action',
    },
]

const dataList = ref<API.User[]>([])
const total = ref(0)

//搜索条件
const searchParams = reactive<API.UserQueryRequest>({
    current: 1,
    pageSize: 10,
    sortField:"createTime",
    sortOrder:"ascend"
})

const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
})

const handleTableChange = (pag:any, filters:any, sorter:any) => {
    pagination.current = pag.current
    pagination.pageSize = pag.pageSize
    
    if (sorter.field) {
        searchParams.sortField = sorter.field
        searchParams.sortOrder = sorter.order
    }
    fetchData()
}

//获取数据
const fetchData = async () => {
    const res = await listUserVoByPageUsingPost(
        { ...searchParams,
            current: pagination.current,
            pageSize: pagination.pageSize,
         })
    if (res.data.data) {
        dataList.value = res.data.data.records ?? []
        total.value = res.data.data.total ?? 0
    } else {
        message.error("获取数据失败，" + res.data.message)
    }
}

//页面加载时请求一次
onMounted(() => {
    fetchData()
})


</script>
